<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:checked与:indeterminate</title>
		<style>
			.circle {
				display: inline-block;
				border: 1px solid #000000;
				border-radius: 50%;
				width: 20px;
				height: 20px;
				cursor: pointer;
				user-select: none;
			}
			:checked + .circle {
				border-color: deepskyblue;
				background-color: azure;
			}
			input:not(.nosure) {
				position: absolute;
				clip: rect(0,0,0,0);
			}
			.nosure:indeterminate + label {
				background-color: red;
				color: #FFFFFF;
			}
			/* ----------------------------- */
			progress:indeterminate {
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<h2>:checked 只支持表单元素</h2>
		<h4>见:target</h4>
		<h4>利用label自定义样式</h4>
		<input type="radio" id="r1" name="diy"/>
		<label for="r1" class="circle"></label>
		<input type="radio" id="r2" name="diy"/>
		<label for="r2" class="circle"></label>
		<hr />
		<h4>:indeterminate不确定值伪类，即并非全选，与之类似</h4>
		<input class="nosure" type="radio" id="r2" name="nosure"/><label>1111</label>
		<input class="nosure" type="radio" id="r2" name="nosure"/><label>2222</label>
		<hr />
		<h4>:indeterminate与progress元素</h4>
		<h4>设置了value的progress不匹配:indeterminate</h4>
		<progress min="1" max="100"></progress>
		<progress min="1" max="100" value="50"></progress>
	</body>
</html>
